<template>
    <el-drawer v-model="drawerShow" :before-close="close" :with-header="false" size="50%">
    <div class="record-container">
        <span class="_before">提箱单信息</span>
       
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">租箱企业：</el-col>
            <el-col :span="19">{{ packingInfo.companyName }}</el-col>
          </el-row>
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">提箱单号：</el-col>
            <el-col :span="19">{{ packingInfo.packingNo }}</el-col>
          </el-row>
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">客户：</el-col>
            <el-col :span="19">{{ packingInfo.agentName }}</el-col>
          </el-row>
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">关联订单：</el-col>
            <el-col :offset="5" :span="19">
              <el-table :data="rentOrderList">
              <el-table-column prop="orderNo" label="订单号" align="center"/>
              <el-table-column label="预计提箱日期" align="center">
                <template #default="scope"> {{ formatDate(scope.row.planPickupDate, 2) }} </template>
              </el-table-column>
              <el-table-column label="下单日期" align="center">
                <template #default="scope"> {{ formatDate(scope.row.createTime, 2) }} </template>
              </el-table-column>
              <el-table-column label="联系人" align="center">{{ packingInfo.agentUserName }}</el-table-column>
              <el-table-column label="联系电话" align="center">
                <template #default="scope">
                  <span v-if="packingInfo.agentUserAreaCode">+{{ packingInfo.agentUserAreaCode }} </span>
                  {{ packingInfo.agentUserTel }}
                </template>
              </el-table-column>
            </el-table>
            </el-col>
          </el-row>
          <el-row class="marginTop10">
          <el-col :span="5" class="text-right">放箱指令号：</el-col>
          <el-col :span="19">{{ packingInfo.instruction || '--' }}</el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">提箱单有效范围：</el-col>
          <el-col :span="19">
            {{ formatDate(packingInfo.packingValidityPeriodStart, 2) }}
            ~
            {{ formatDate(packingInfo.packingValidityPeriodEnd, 2) }}
          </el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">箱型/箱量/箱况：</el-col>
          <el-col :span="19">
            <el-table :data="packingRecord">
              <el-table-column prop="boxType" label="箱型"> </el-table-column>
              <el-table-column prop="boxCondition" label="箱况"> </el-table-column>
              <el-table-column prop="boxQuantity" label="箱量" ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">箱号：</el-col>
          <el-col :span="19">
            <el-row>
                <div style="width: 100%;display: block;" v-if="containerNoInfo.length>0">
                  <template v-for="(item,index) in  containerNoInfo" :key="index">
                    <el-col :span="6" style="border:1px solid #ccc;" class="text-center">{{item.containerNo || '--' }}</el-col>
                  </template> 
                </div>
                <div style="width: 100%;display: block;" v-else>--</div>       
            </el-row>
          </el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">堆场名称：</el-col>
          <el-col :span="19">{{ packingInfo.yardName || '--' }}</el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">堆场地址：</el-col>
          <el-col :span="19">{{ packingInfo.yardAddress || '--' }}</el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">联系人：</el-col>
          <el-col :span="19">{{ packingInfo.yardContact || '--' }}</el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">联系电话：</el-col>
          <el-col :span="19">
            <span v-if="packingInfo.yardTel">+{{packingInfo.areaCode}}  {{ packingInfo.yardTel }}</span>
            <span v-else>--</span>
            </el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">邮箱：</el-col>
          <el-col :span="19">{{ packingInfo.yardEmail || '--' }}</el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">堆场作业时间：</el-col>
          <el-col :span="19">{{ packingInfo.yardWorkTime || '--' }}</el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="5" class="text-right">状态：</el-col>
          <el-col :span="19">{{ { 5: '已发放', 10: '已下载', 15: '提箱中', 20: '已完成' ,25: '已作废', 30: '已过期' }[packingInfo.status] }}</el-col>
        </el-row>
        <el-button @click="listTap" type="primary" style="margin-top: 50px;text-align: right;">提箱记录</el-button>
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils'
import { onActivated, ref,nextTick } from 'vue'
import yardInfoCard from '@/views/components/boxYard/yardInfo.vue'
import {  getPackingData } from '@/api/orderManage/packing'

const openBox = (id) => {
  detaiInfo(id)
}
//查看还箱单详情
const drawerShow=ref(false)
const content=ref('从货代公司收到还箱单之日起，以天为单位计算有效期，不足一天按一天计算。')
const packingInfo = ref({})
const rentOrderList = ref([])
const containerNoInfo = ref([])
const packingRecord=ref([])
const detaiInfo = (row: any) => {
  getPackingData(row).then((res: any) => {
    drawerShow.value=true
    packingInfo.value = res.data
    rentOrderList.value = JSON.parse(res.data.orderList)
    packingRecord.value = [{ boxQuantity: res.data.totalQuantity, boxType: boxTypeFilter(res.data.boxType), boxCondition: boxConditionFilter(res.data.boxCondition),}]
    containerNoInfo.value = JSON.parse(res.data.containerNoList) || []
  })
};
//过滤
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const emits = defineEmits(['tixiangdanInfoClick','tixiangdanInfoListClick' ])
//关闭
const close=()=>{
  emits('tixiangdanInfoClick', packingInfo.value);
  drawerShow.value=false
}
const listTap=()=>{
  emits('tixiangdanInfoListClick', packingInfo.value);
}
defineExpose({
    openBox
})
</script>
<style lang="scss" scoped>
</style>
